<template>
	<view class="home-invite">
		<!-- 背景图片 -->
		<image class="image-bg" src="/static/images/poster/background.png" mode="widthFix"></image>
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<navBar :title="''"></navBar>
		</view>
		<view class="invite-content">
			<image class="qrcode-bg" src="/static/images/poster/code_background.png" mode="widthFix"></image>
			<view class="main-content-style">
				<view class="main-content">
					<view class="qrcode-img-style">
						<image class="qrcode-img" :src="qrCodeUrl" mode="widthFix"></image>
					</view>
					<view class="code-content">
						<text class="code-text-one">邀请码: {{ code }}</text>
						<text class="code-text" @click="copy">复制</text>
					</view>
					<view class="copy-button">立即分享</view>
				</view>
			</view>
		</view>
		<!-- <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas> -->
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		GETuserinfo
	} from '@/common/api.js';
	// const qrCode = require('@/common/weapp-qrcode.js'); // 生成二维码
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components: {
			navBar
		},
		data() {
			return {
				code: '', // 邀请码
				qrCodeUrl: '', // 邀请码地址

				/* 生成海报图 */
				canvasW: 0, // 画布宽
				canvasH: 0, // 画布高
				SystemInfo: {}, // 设备信息
				goodsImg: {}, // 商品主图
				ewmImg: {}, // 二维码图片
				ewmW: 120, // 二维码大小
				title: 'COCOSILIYA抖音爆款男女士鎏金沙香水持久自然淡香流沙金香水', // 商品标题
				price: '158.00', // 价格
				Oldprice: '350.00', // 原价
				name: '天涯过客', // 推荐人
			};
		},
		mounted() {
			Fn.Loading('邀请码生成中');
		},
		async onLoad() {
			/* 获取用户信息 */
			await this.getUser();

			// // 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
			// this.SystemInfo = await this.getSystemInfo();
			// // 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
			// // this.goodsImg = await this.getImageInfo(
			// // 	'http://api.yoronglife.com//uploads/attach/2020/10/20201020/7f0ecf34d9408f7fc3b789894483ab75.jpg');
			// this.ewmImg = this.qrCodeUrl;
			// // this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
			// // this.canvasH = this.goodsImg.height + this.ewmW + 50; // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）
			// console.log(this.qrCodeUrl);
			// // 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
			// if (this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this.SystemInfo
			// 	.errMsg == 'getSystemInfo:ok') {
			// 	console.log('ok')
			// 	uni.showToast({
			// 		icon: 'loading',
			// 		mask: true,
			// 		duration: 10000,
			// 		title: '海报绘制中',
			// 	});
			// 	setTimeout(() => {
			// 		var ctx = uni.createCanvasContext('myCanvas', this);
			// 		// 填充背景色，白色
			// 		ctx.setFillStyle('#fff'); // 默认白色
			// 		ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
			// 		// 绘制商品主图，二维码
			// 		ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this
			// 			.canvasW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
			// 		ctx.drawImage(this.ewmImg.path, this.canvasW - 130, this.canvasW + 10, this.ewmW, this
			// 			.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
			// 		// 3、绘制商品标题，多余文字自动换行
			// 		ctx.setFontSize(16); // setFontSize() 设置字体字号
			// 		ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
			// 		/* str 这段代码是我百度找的，参考别人的。canvas不能自动换行，需要自行计算 */
			// 		let _strlineW = 0;
			// 		let _strLastIndex = 0; //每次开始截取的字符串的索引
			// 		let _strHeight = this.canvasW + 30; //绘制字体距离canvas顶部的初始高度
			// 		let _num = 1;
			// 		for (let i = 0; i < this.title.length; i++) {
			// 			_strlineW += ctx.measureText(this.title[i]).width;
			// 			if (_strlineW > this.canvasW - 155) {
			// 				if (_num == 2 && 2) {
			// 					//文字换行数量大于二进行省略号处理
			// 					ctx.fillText(this.title.substring(_strLastIndex, i - 5) + '...', 10,
			// 						_strHeight);
			// 					_strlineW = 0;
			// 					_strLastIndex = i;
			// 					_num++;
			// 					break;
			// 				} else {
			// 					ctx.fillText(this.title.substring(_strLastIndex, i), 10, _strHeight);
			// 					_strlineW = 0;
			// 					_strHeight += 20;
			// 					_strLastIndex = i;
			// 					_num++;
			// 				}
			// 			} else if (i == this.title.length - 1) {
			// 				ctx.fillText(this.title.substring(_strLastIndex, i + 1), 10, _strHeight);
			// 				_strlineW = 0;
			// 			}
			// 		}
			// 		/* end */
			// 		//4、商品价格
			// 		ctx.setFontSize(16) // 字号
			// 		ctx.setFillStyle('#e31d1a') // 颜色
			// 		ctx.fillText('￥' + this.price, 10, this.canvasW + 75); // （文字，x，y）
			// 		ctx.setFontSize(12)
			// 		ctx.setFillStyle('#b8b8b8')
			// 		ctx.fillText('原价￥' + this.Oldprice, 100, this.canvasW + 75);
			// 		// 5、邀请信息
			// 		ctx.setFontSize(16)
			// 		ctx.setFillStyle('#333')
			// 		ctx.fillText(this.name + '推荐给你', 10, this.canvasW + 100);
			// 		ctx.setFontSize(14)
			// 		ctx.setFillStyle('#b8b8b8')
			// 		ctx.fillText('长按或扫描识别二维码', 10, this.canvasW + this.ewmW);
			// 		ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
			// 			console.log(ret)
			// 			uni.showToast({
			// 				icon: 'success',
			// 				mask: true,
			// 				title: '绘制完成',
			// 			});
			// 			uni.canvasToTempFilePath({ // 保存canvas为图片
			// 				canvasId: 'myCanvas',
			// 				quality: 1,
			// 				complete: function(res) {
			// 					// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
			// 					console.log(res)
			// 				},
			// 			});
			// 		});
			// 	}, 1500)
			// } else {
			// 	console.log('err')
			// };
		},
		onShow() {

		},
		created() {

		},
		methods: {

			// 获取图片信息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},

			// 获取设备信息
			getSystemInfo() {
				return new Promise((req, rej) => {
					uni.getSystemInfo({
						success: function(res) {
							req(res)
						}
					});
				})
			},

			/* 获取用户信息 */
			getUser() {
				const that = this;
				setTimeout(() => {
					Fn.LoadingOff();
					GETuserinfo().then((res) => {
						if (res.status === 1) {
							that.code = res.data.inviteCode;
							that.qrCodeUrl = res.data.invitecode_img;
						} else {
							Fn.Toast(res.msg, 3, 1500);
						};
					});
				}, 700);
			},

			/* 复制地址 */
			copy() {
				uni.setClipboardData({
					data: this.code, //要被复制的内容
					success: () => { //复制成功的回调函数
						Fn.Toast('邀请码复制成功', 3, 1500); //提示
					},
					fail: () => {
						Fn.Toast('邀请码复制失败', 3, 1500); //提示
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFECED;
	}

	uni-page-body {
		background: none;
	}

	.image-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.home-invite {
		width: 100%;
		height: 100vh;
		position: relative;

		.invite-content {
			position: relative;
			top: 50%;
			margin-top: -550rpx;

			.qrcode-bg {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				// position: absolute;
				// left: 0;
				// right: 0;
				// z-index: 0;
			}

			// .top-content {
			// 	position: absolute;
			// 	top: 93rpx;
			// 	left: 0;
			// 	right: 0;

			// 	.title {
			// 		text-align: center;
			// 		font-size: 50rpx;
			// 		font-weight: 600;
			// 		text-shadow: 5px 5px 6px #959595;
			// 	}
			// }

			// .top-content-two {
			// 	position: absolute;
			// 	top: 220rpx;
			// 	left: 0;
			// 	right: 0;

			// 	.title {
			// 		color: #EB4A4A;
			// 		text-align: center;
			// 		font-size: 36rpx;
			// 		font-weight: 600;
			// 	}
			// }

			.main-content-style {
				position: absolute;
				bottom: 180rpx;
				left: 0;
				right: 0;
				z-index: 0;

				.main-content {
					margin: 0 auto;
					padding: 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.code-content {

						.code-text {
							margin-left: 20rpx;
							color: #F71D1F;
							font-size: 30rpx;
							text-align: center;
						}

						.code-text-one {
							font-size: 30rpx;
							text-align: center;
						}
					}

					.qrcode-img-style {

						.qrcode-img {
							width: 220rpx;
							height: 220rpx;
						}
					}

					// .code-style {
					// 	margin: 0 30rpx;
					// 	color: #EB4A4A;
					// 	font-size: 30rpx;
					// 	text-align: center;
					// 	word-wrap: break-word;
					// 	word-break: break-all;
					// }

					.copy-button {
						width: 400rpx;
						margin-top: 100rpx;
						line-height: 90rpx;
						color: #BC2617;
						font-size: 32rpx;
						text-align: center;
						border-radius: 50rpx;
						background-image: linear-gradient(270deg, #FFE5AE 0, #FCEB9D 100%);
						// -webkit-background-clip: text;
						// -webkit-text-fill-color: transparent;
					}
				}
			}

			/* 短手机屏幕 */
			// @media (max-height: 768px) {
			// 	.top-content {
			// 		position: absolute;
			// 		top: 93rpx;
			// 		left: 0;
			// 		right: 0;

			// 		.title {
			// 			text-align: center;
			// 			font-size: 50rpx;
			// 			font-weight: 600;
			// 			text-shadow: 5px 5px 6px #959595;
			// 		}
			// 	}

			// 	.top-content-two {
			// 		position: absolute;
			// 		top: 220rpx;
			// 		left: 0;
			// 		right: 0;

			// 		.title {
			// 			color: #EB4A4A;
			// 			text-align: center;
			// 			font-size: 36rpx;
			// 			font-weight: 600;
			// 			// text-shadow: 5px 5px 6px #959595;
			// 		}
			// 	}

			// 	.main-content-style {
			// 		position: absolute;
			// 		top: 370rpx;
			// 		left: 0;
			// 		right: 0;
			// 		margin: 0 auto;
			// 		// margin-top: -25vw;

			// 		.main-content {
			// 			width: 80vw;
			// 			height: 80vw;
			// 			margin: 0 auto;
			// 			padding: 20rpx 0;
			// 			display: grid;

			// 			.code-text {
			// 				color: #EB4A4A;
			// 				font-size: 46rpx;
			// 				font-weight: 600;
			// 				text-align: center;
			// 				margin-bottom: 20rpx;
			// 			}

			// 			.code-text-one {
			// 				color: #EB4A4A;
			// 				font-size: 38rpx;
			// 				font-weight: 600;
			// 				text-align: center;
			// 				// margin-bottom: 20rpx;
			// 			}

			// 			.code-style {
			// 				margin: 0 30rpx;
			// 				color: #EB4A4A;
			// 				font-size: 30rpx;
			// 				font-weight: 600;
			// 				text-align: center;
			// 				word-wrap: break-word;
			// 				word-break: break-all;
			// 			}

			// 			.qrcode-img-style {
			// 				align-self: center;
			// 				justify-self: center;

			// 				.qrcode-img {
			// 					margin-top: 40rpx;
			// 					width: 45vw;
			// 					height: 45vw;
			// 				}
			// 			}

			// 			// .text-style {
			// 			// 	margin: 0 30rpx;
			// 			// }
			// 		}

			// 		// .button-style {
			// 		// 	position: relative;
			// 		// 	text-align: center;

			// 		// 	.button {
			// 		// 		width: 60vw;
			// 		// 		height: 20vw;
			// 		// 	}

			// 		// 	.button-text {
			// 		// 		position: absolute;
			// 		// 		margin: 0 auto;
			// 		// 		top: 50%;
			// 		// 		left: 0;
			// 		// 		right: 0;
			// 		// 		margin-top: -4.1vw;
			// 		// 		color: #E6D19F;
			// 		// 		font-size: 36rpx;
			// 		// 		font-weight: 600;
			// 		// 		// -webkit-text-stroke: 0.5px #4B2113;
			// 		// 	}
			// 		// }
			// 	}
			// }

			/* 长手机屏幕 */
			// @media (min-height: 769px) and (max-height: 899px) {
			// 	.top-content {
			// 		position: absolute;
			// 		top: 103rpx;
			// 		left: 0;
			// 		right: 0;

			// 		.title {
			// 			text-align: center;
			// 			font-size: 50rpx;
			// 			font-weight: 600;
			// 			text-shadow: 5px 5px 6px #959595;
			// 		}
			// 	}

			// 	.top-content-two {
			// 		position: absolute;
			// 		top: 230rpx;
			// 		left: 0;
			// 		right: 0;

			// 		.title {
			// 			color: #EB4A4A;
			// 			text-align: center;
			// 			font-size: 36rpx;
			// 			font-weight: 600;
			// 			// text-shadow: 5px 5px 6px #959595;
			// 		}
			// 	}

			// 	.main-content-style {
			// 		position: absolute;
			// 		top: 375rpx;
			// 		left: 0;
			// 		right: 0;
			// 		margin: 0 auto;
			// 		// margin-top: -25vw;

			// 		.main-content {
			// 			width: 80vw;
			// 			height: 80vw;
			// 			margin: 0 auto;
			// 			padding: 20rpx 0;
			// 			display: grid;

			// 			.code-text {
			// 				color: #EB4A4A;
			// 				font-size: 46rpx;
			// 				font-weight: 600;
			// 				text-align: center;
			// 				margin-bottom: 20rpx;
			// 			}

			// 			.code-text-one {
			// 				color: #EB4A4A;
			// 				font-size: 38rpx;
			// 				font-weight: 600;
			// 				text-align: center;
			// 				// margin-bottom: 20rpx;
			// 			}

			// 			.code-style {
			// 				margin: 0 30rpx;
			// 				color: #EB4A4A;
			// 				font-size: 30rpx;
			// 				font-weight: 600;
			// 				text-align: center;
			// 				word-wrap: break-word;
			// 				word-break: break-all;
			// 			}

			// 			.qrcode-img-style {
			// 				align-self: center;
			// 				justify-self: center;

			// 				.qrcode-img {
			// 					margin-top: 40rpx;
			// 					width: 45vw;
			// 					height: 45vw;
			// 				}
			// 			}

			// 			// .text-style {
			// 			// 	margin: 0 30rpx;
			// 			// }
			// 		}

			// 		// .button-style {
			// 		// 	position: relative;
			// 		// 	text-align: center;

			// 		// 	.button {
			// 		// 		width: 60vw;
			// 		// 		height: 20vw;
			// 		// 	}

			// 		// 	.button-text {
			// 		// 		position: absolute;
			// 		// 		margin: 0 auto;
			// 		// 		top: 50%;
			// 		// 		left: 0;
			// 		// 		right: 0;
			// 		// 		margin-top: -4.1vw;
			// 		// 		color: #E6D19F;
			// 		// 		font-size: 36rpx;
			// 		// 		font-weight: 600;
			// 		// 		// -webkit-text-stroke: 0.5px #4B2113;
			// 		// 	}
			// 		// }
			// 	}
			// }

			/* 超长手机屏幕 */
			// @media (min-height: 900px) {
			// 	.top-content {
			// 		position: absolute;
			// 		top: 108rpx;
			// 		left: 0;
			// 		right: 0;

			// 		.title {
			// 			text-align: center;
			// 			font-size: 50rpx;
			// 			font-weight: 600;
			// 			text-shadow: 5px 5px 6px #959595;
			// 		}
			// 	}

			// 	.top-content-two {
			// 		position: absolute;
			// 		top: 230rpx;
			// 		left: 0;
			// 		right: 0;

			// 		.title {
			// 			color: #EB4A4A;
			// 			text-align: center;
			// 			font-size: 36rpx;
			// 			font-weight: 600;
			// 			// text-shadow: 5px 5px 6px #959595;
			// 		}
			// 	}

			// 	.main-content-style {
			// 		position: absolute;
			// 		top: 380rpx;
			// 		left: 0;
			// 		right: 0;
			// 		margin: 0 auto;
			// 		// margin-top: -25vw;

			// 		.main-content {
			// 			width: 80vw;
			// 			height: 80vw;
			// 			margin: 0 auto;
			// 			padding: 20rpx 0;
			// 			display: grid;

			// 			.code-text {
			// 				color: #EB4A4A;
			// 				font-size: 50rpx;
			// 				font-weight: 600;
			// 				text-align: center;
			// 				margin-bottom: 20rpx;
			// 			}

			// 			.code-text-one {
			// 				color: #EB4A4A;
			// 				font-size: 32rpx;
			// 				font-weight: 600;
			// 				text-align: center;
			// 				// margin-bottom: 20rpx;
			// 			}

			// 			.code-style {
			// 				margin: 0 30rpx;
			// 				color: #EB4A4A;
			// 				font-size: 30rpx;
			// 				font-weight: 600;
			// 				text-align: center;
			// 				word-wrap: break-word;
			// 				word-break: break-all;
			// 			}

			// 			.qrcode-img-style {
			// 				align-self: center;
			// 				justify-self: center;

			// 				.qrcode-img {
			// 					margin-top: 40rpx;
			// 					width: 45vw;
			// 					height: 45vw;
			// 				}
			// 			}

			// 			// .text-style {
			// 			// 	margin: 0 30rpx;
			// 			// }
			// 		}

			// 		// .button-style {
			// 		// 	position: relative;
			// 		// 	text-align: center;

			// 		// 	.button {
			// 		// 		width: 60vw;
			// 		// 		height: 20vw;
			// 		// 	}

			// 		// 	.button-text {
			// 		// 		position: absolute;
			// 		// 		margin: 0 auto;
			// 		// 		top: 50%;
			// 		// 		left: 0;
			// 		// 		right: 0;
			// 		// 		margin-top: -4.1vw;
			// 		// 		color: #E6D19F;
			// 		// 		font-size: 36rpx;
			// 		// 		font-weight: 600;
			// 		// 		// -webkit-text-stroke: 0.5px #4B2113;
			// 		// 	}
			// 		// }
			// 	}
			// }
		}
	}
</style>
